<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登录页</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!--页面logo图标-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--^^^-->
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<style>
			body{
				background-image: url(images/211.jpg);
				background-size:100%;
				font-family: "microsoft yahei";
			}
			#div1{
				margin-top:260px ;
				padding-bottom:40px ;
				width: 35%;
				background-color:white;
				border-radius:20px ;
				opacity: 0.8;
			}
			.button{
				cursor: pointer;
			}
			#lname{
				border-bottom-right-radius: 4px;
				border-top-right-radius: 4px;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function (){
			$("#lname").blur(function (){
				var lname = $(this).val();
				if(lname == ""){
					$(this).parent().parent().removeClass("has-success");
					$(this).parent().parent().addClass("has-error");
					$("#lname + span").show();
					$("#lname + span").addClass("glyphicon-remove");
					$("#lname + span").removeClass("glyphicon-ok");
				}else{
					$(this).parent().parent().removeClass("has-error");
					$(this).parent().parent().addClass("has-success");
					$("#lname + span").show();
					$("#lname + span").addClass("glyphicon-ok");
					$("#lname + span").removeClass("glyphicon-remove");
				}
			});
			$(document).ready(function (){
	  			$("#eye").click(function (){
	  				var type = $("#lpass").attr("type");
	  				if(type == "password"){
	  					$("#lpass").attr("type","text");
	  					$("#eye span").removeClass("glyphicon-eye-close");
	  					$("#eye span").addClass("glyphicon-eye-open");
	  				}else{
	  					$("#lpass").attr("type","password");
	  					$("#eye span").removeClass("glyphicon-eye-open");
	  					$("#eye span").addClass("glyphicon-eye-close");
	  				}
	  			})
  			});
  		//用户名输入框校验	
		$("#f1").submit(function (){
			var lname = $("#lname").val();
			if(lname == ""){
				$("#lname").parent().parent().addClass("has-error");
				return false;
			}
			});
		});
		$(document).ready(function(){
			$("#login").click(function(){
				var lname = $("#lname").val();
				var lpass = $("#lpass").val();
				if(lname==""){
					alert("请输入账号");
					return false;
				}
				else if(lpass==""){
					alert("请输入密码");
					return false;
				}
				
			})
		});
		</script>
	</head>
	<body>
		<div id="div1" class="container-fluid">
			<div id="div0">
				<h1 style="text-align: center;">医疗管理系统</h1>
			</div>
			<form class="form-horizontal" action="/DoctorSystem/login" method="POST">
				<div class="form-group">
				    <label for="lname" class="col-md-2 control-label col-md-offset-1">账号</label>
				    <div class="input-group col-sm-7">
				    	<div class="input-group-addon">
				    		<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
				    	</div>
				      <input type="text" class="form-control" id="lname" name="uname" placeholder="请输入账号">
				      <span class="glyphicon form-control-feedback" style="display: none;" aria-hidden="true"></span>
				    </div>
				</div>
				<div class="form-group">
				    <label for="lpass" class="col-md-2 control-label col-md-offset-1">密码</label>
				    <div class="col-md-7 input-group">
				    	<div class="input-group-addon">
				    		<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
				    	</div>
				      <input type="password" class="form-control" id="lpass" name="upass" placeholder="请输入密码">
				      <div class="input-group-addon" id="eye">
					      	<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
					  </div>
				    </div>
				</div>
				<div class="row">
					<div class="col-md-3 col-md-offset-3">
						<button id="reqister" type="button" class="btn btn-primary" style="width: 100%;">注册</button>
					</div>
					<div class="col-md-3">
						<button id="login" type="submit" class="btn btn-success" style="width: 100%;">登录</button>
					</div>
				</div>
			</form>
		</div>
	</body>
</html>
